<template>
  <div>羊只品相

    <div class="app-container">
      <div class="search-container">


        <el-form :inline="true" :model="formInline" class="demo-form-inline">

          <el-form-item label="羊只耳号" style="width: 180px">
            <el-input v-model="formInline.earTag" placeholder="请输羊只耳号" />
          </el-form-item>

          <el-form-item label="品种" style="width: 180px">
            <el-select v-model="formInline.variety" placeholder="请选择" clearable>
              <el-option v-for="item in varitys" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="性别" style="width: 180px">
            <el-select v-model="formInline.sheepRescissionSex" placeholder="请选择" clearable>
              <el-option label="公" :value="true" />
              <el-option label="母" :value="false" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit()">查询</el-button>
            <el-button type="danger" @click="onReset">重置</el-button>
            <el-button type="danger" @click="pishan">批量</el-button>
            <el-button type="success" @click="Xin()">新增</el-button>
          </el-form-item>
        </el-form>


        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="earTag" label="耳号" />
          <el-table-column prop="variety" label="品种">
            <template v-slot="scope">
              <el-tag type="primary" v-if="scope.row.variety == 1">杜泊</el-tag>
              <el-tag type="success" v-if="scope.row.variety == 2">
                澳洲白
              </el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 3">
                萨福克
              </el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 4">杜湖</el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 5">
                杜杜湖
              </el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 6">
                萨杜湖
              </el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 7">澳湖</el-tag>
              <el-tag type="danger" v-if="scope.row.variety == 8">湖羊</el-tag>

              <el-tag type="danger" v-if="scope.row.variety == 9">
                澳杜湖
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="sheepRescissionSex" label="性别">
            <template v-slot="scope">
              <el-tag type="primary" v-if="scope.row.sheepRescissionSex == 0">
                母
              </el-tag>
              <el-tag type="success" v-else-if="scope.row.sheepRescissionSex == 1">
                公
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="buildingManagementId" label="当前栋舍">
            <template v-slot="scope">
              <el-tag type="primary" v-if="scope.row.buildingManagementId == 1">
                1栋
              </el-tag>
              <el-tag type="success" v-if="scope.row.buildingManagementId == 2">
                2栋
              </el-tag>
              <el-tag type="danger" v-else-if="scope.row.buildingManagementId == 3">
                3栋
              </el-tag>
            </template>

          </el-table-column>

          <el-table-column prop="columnManagementId" label="当前栏位">
            <template v-slot="scope">
              <el-tag type="primary" v-if="scope.row.columnManagementId == 1">
                后备舍1
              </el-tag>
              <el-tag type="success" v-if="scope.row.columnManagementId == 2">
                后备舍2
              </el-tag>
              <el-tag type="danger" v-else-if="scope.row.columnManagementId == 3">
                后备舍3
              </el-tag>
            </template>

          </el-table-column>


          <el-table-column prop="measureDate" label="测定日期">
            <template v-slot="scope">
              {{ scope.row.measureDate.substring(0, 10) }}


            </template>
          </el-table-column>
          <el-table-column prop="measureAge" label="测定日龄" />
          <el-table-column prop="tooth" label="牙齿咬合" />
          <el-table-column prop="hair" label="毛发" />
          <el-table-column prop="stain" label="色斑" />
          <el-table-column prop="hoofColor" label="蹄颜色" />
          <el-table-column prop="mouthColor" label="嘴颜色" />
          <el-table-column prop="angle" label="角" />
          <el-table-column prop="fatDistribution" label="脂肪分布" />

          <el-table-column fixed="right" label="操作" width="200" align="center">
            <template #default="scope">
              <el-button type="primary" link @click="handleDelete(scope.row.appearanceId)">
                删除
              </el-button>

              <el-button type="primary" link @click="Updae(scope.row)">
                修改
              </el-button>

            </template>
          </el-table-column>
        </el-table>


        <el-dialog v-model="dialogVisible" title="Tips" width="500">

          <span>品相添加</span>
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-row :gutter="20">

              <el-col :span="12" :offset="0">


                <el-form-item label="测定日期" prop="measureDate">
                  <el-date-picker v-model="form.measureDate" type="date" placeholder="请选择测定日期" />
                </el-form-item>

                <el-form-item label="牙齿咬合" prop="tooth">
                  <el-select v-model="form.tooth" placeholder="请选择">
                    <el-option label="正常" :value="1" />
                    <el-option label="错齿" :value="0" />
                  </el-select>
                </el-form-item>


                <el-form-item label="色斑" prop="stain">
                  <el-select v-model="form.stain" placeholder="请选择">
                    <el-option label="1分" :value="1" />
                    <el-option label="2分" :value="2" />
                    <el-option label="3分" :value="3" />
                  </el-select>
                </el-form-item>


                <el-form-item label="嘴颜色" prop="mouthColor">
                  <el-select v-model="form.mouthColor" placeholder="请选择">
                    <el-option label="1分" :value="1" />
                    <el-option label="2分" :value="2" />
                    <el-option label="3分" :value="3" />
                  </el-select>
                </el-form-item>



                <el-form-item label="胭脂分布" prop="fatDistribution">
                  <el-select v-model="form.fatDistribution" placeholder="请选择">
                    <el-option label="1分" :value="1" />
                    <el-option label="2分" :value="2" />
                    <el-option label="3分" :value="3" />
                  </el-select>
                </el-form-item>



              </el-col>

              <el-col :span="12" :offset="0">

                <el-form-item label="羊只耳号" style="width: 225px">
                  <el-select v-model="form.earTag" placeholder="请选择" clearable>
                    <el-option v-for="item in eartags" :key="item.sheepFileId" :label="item.earTag"
                      :value="item.earTag" />
                  </el-select>
                </el-form-item>


                <el-form-item label="毛发" prop="hair">
                  <el-select v-model="form.hair" placeholder="请选择">
                    <el-option label="1分" :value="1" />
                    <el-option label="2分" :value="2" />
                    <el-option label="3分" :value="3" />
                  </el-select>
                </el-form-item>


                <el-form-item label="蹄颜色" prop="hoofColor">
                  <el-select v-model="form.hoofColor" placeholder="请选择">
                    <el-option label="1分" :value="1" />
                    <el-option label="2分" :value="2" />
                    <el-option label="3分" :value="3" />
                  </el-select>
                </el-form-item>


                <el-form-item label="角" prop="angle">
                  <el-select v-model="form.angle" placeholder="请选择">
                    <el-option label="有角" :value="1" />
                    <el-option label="无角" :value="0" />
                  </el-select>
                </el-form-item>

              </el-col>

            </el-row>

            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>



        <el-dialog v-model="updates" title="Tips" width="500">

          <span>品相修改</span>
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-row :gutter="20">

              <el-col :span="12" :offset="0">


                <el-form-item label="测定日期" prop="measureDate">
                  <el-date-picker v-model="form.measureDate" type="date" placeholder="请选择测定日期" />
                </el-form-item>

                <el-form-item label="牙齿咬合" prop="tooth">
                  <el-select v-model="form.tooth" placeholder="请选择">
                    <el-option label="正常" :value="1" />
                    <el-option label="错齿" :value="0" />
                  </el-select>
                </el-form-item>


                <el-form-item label="色斑" prop="stain">
                  <el-select v-model="form.stain" placeholder="请选择">
                    <el-option label="1分" :value="1" />
                    <el-option label="2分" :value="2" />
                    <el-option label="3分" :value="3" />
                  </el-select>
                </el-form-item>


                <el-form-item label="嘴颜色" prop="mouthColor">
                  <el-select v-model="form.mouthColor" placeholder="请选择">
                    <el-option label="1分" :value="1" />
                    <el-option label="2分" :value="2" />
                    <el-option label="3分" :value="3" />
                  </el-select>
                </el-form-item>



                <el-form-item label="胭脂分布" prop="fatDistribution">
                  <el-select v-model="form.fatDistribution" placeholder="请选择">
                    <el-option label="1分" :value="1" />
                    <el-option label="2分" :value="2" />
                    <el-option label="3分" :value="3" />
                  </el-select>
                </el-form-item>



              </el-col>

              <el-col :span="12" :offset="0">

                <el-form-item label="羊只耳号" style="width: 225px">
                  <el-select v-model="form.earTag" placeholder="请选择" clearable>
                    <el-option v-for="item in eartags" :key="item.sheepFileId" :label="item.earTag"
                      :value="item.earTag" />
                  </el-select>
                </el-form-item>


                <el-form-item label="毛发" prop="hair">
                  <el-select v-model="form.hair" placeholder="请选择">
                    <el-option label="1分" :value="1" />
                    <el-option label="2分" :value="2" />
                    <el-option label="3分" :value="3" />
                  </el-select>
                </el-form-item>


                <el-form-item label="蹄颜色" prop="hoofColor">
                  <el-select v-model="form.hoofColor" placeholder="请选择">
                    <el-option label="1分" :value="1" />
                    <el-option label="2分" :value="2" />
                    <el-option label="3分" :value="3" />
                  </el-select>
                </el-form-item>


                <el-form-item label="角" prop="angle">
                  <el-select v-model="form.angle" placeholder="请选择">
                    <el-option label="有角" :value="1" />
                    <el-option label="无角" :value="0" />
                  </el-select>
                </el-form-item>

              </el-col>

            </el-row>

            <el-form-item>
              <el-button type="primary" @click="Upwd(ruleFormRef)">
                保存
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>




      </div>


    </div>

  </div>

  <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
    :page-sizes="[1, 2, 3, 4]" :background="true" layout="total, sizes, prev, pager, next, jumper"
    :total="page.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />


</template>


<script setup lang="ts">


import { ref, onMounted, reactive } from "vue";
import PurchaseAPI from "@/api/Breeding/index";
import Appearance, { getAppearance, AddAppearance } from "../../../api/AppearanceModel/index";
import { ElMessageBox, ElMessage, UploadInstance } from "element-plus";
import AddSupplier from "./addSupplier.vue";
import { useRouter } from "vue-router";
import { number } from "echarts";
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

onMounted(() => {
  onSubmit()
  getvaritysList()
  Eartag()
})


const formInline = reactive<getAppearance>({
  pageIndex: 1,
  pageSize: 15,
  earTag: "",
  variety: null,
  sheepRescissionSex: null
});


//品种类型
const varitys = ref([]);
const getvaritysList = () => {
  Appearance.AppearanceVarity()
    .then((res: any): any => {
      varitys.value = res.data;
    })
    .catch((err: any) => {
      console.log(err);
    });
};




const formEartag = reactive({
  presentState: 1,
  sheepType: 3

})


const eartags = ref([])
const Eartag = () => {
  console.log(formEartag);
  Appearance.AppearanceEarTagLisShow(formEartag.presentState,
    formEartag.sheepType,)

    .then((res: any): any => {
      eartags.value = res.data;
      console.log(eartags.value)
    })
    .catch((err: any) => {
      console.log(err);
    });
};



const tableData = ref([]);
const handleSizeChange = (val: number) => {
  formInline.pageSize = val;
  onSubmit();
};
const handleCurrentChange = (val: number) => {
  formInline.pageIndex = val;
  onSubmit();
};

//分页条件
const page = reactive({
  totalCount: 0,
  pageCount: 0,
});

//显示列表
const onSubmit = () => {
  console.log(formInline);
  console.log(page);
  Appearance.getAppearanceList(formInline)

    .then((res: any): any => {
      tableData.value = res.data.data;
      page.totalCount = res.data.totalCount;
      page.pageCount = res.data.pageCount;
    })
    .catch((err: any) => {
      console.log(err);
    });
};


const handleDelete = (appearanceId: number) => {
  const ids = [appearanceId];
  ElMessageBox.confirm("确认删除吗?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      Appearance.DeleteAppearance(ids).then((res: any) => {
        if (res.code > 0) {
          ElMessage.success("删除成功");
          onSubmit();
        } else {
          ElMessage.error("删除失败");
          onSubmit();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
const ids = ref([]);

const handleSelectionChange = (val: any) => {
  val.forEach((item) => {
    ids.value.push(item.appearanceId);
  });
  console.log(ids);
};

const pishan = () => {
  ElMessageBox.confirm("确认删除吗?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      Appearance.DeleteAppearance(ids.value).then((res: any) => {
        if (res.code > 0) {
          ElMessage.success("删除成功");
          onSubmit();
        } else {
          ElMessage.error("删除失败");
          onSubmit();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};



const form = reactive<AddAppearance>({
  appearanceId: "",
  earTag: "",
  measureDate: "2024-08-02",
  measureAge: null,
  tooth: null,
  hair: null,
  stain: null,
  hoofColor: null,
  mouthColor: null,
  angle: null,
  fatDistribution: null,
})

const dialogVisible = ref(false);
const Xin = () => {

  dialogVisible.value = true;

}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {

      Appearance.AddAppearance(form)
        .then((res: any): any => {

          if (res.code > 0) {
            ElMessage.success('添加成功')

          }
          else {
            ElMessage.error('添加失败')
          }



        })

      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}



const Upwd = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {

      Appearance.UpdateAppearance(form)
        .then((res: any): any => {

          if (res.code > 0) {
            ElMessage.success('修改成功')

          }
          else {
            ElMessage.error('修改失败')
          }



        })

      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}



const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}



const updates = ref(false);
const Updae = (data: any) => {
  form.appearanceId = data.appearanceId;
  form.earTag = data.earTag;
  form.measureDate = data.measureDate;
  form.measureAge = data.measureAge;
  form.tooth = data.tooth;
  form.hair = data.hair;
  form.stain = data.stain;
  form.hoofColor = data.hoofColor;
  form.mouthColor = data.mouthColor;
  form.angle = data.angle;
  form.fatDistribution = data.fatDistribution;
  updates.value = true;
}







</script>
